<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *,*::before,*::after{
        box-sizing:border-box;
        margin:0;
        padding:0;
    }
    body{
        background-color:#1f1f1f;
    }
    .cont{
        position: relative;
        overflow:hidden;
        height:100vh;
        padding:80px 70px;
    }
    .cont__inner{
        position:relative;
        height:100%;
    }
    .el{
        position:absolute;
        left: 0;
        top:0;
        width:19.2%;
        height:100%;
        background-color: #252525;
        /* 关闭衔接动画 */
        transition: transform 0.6s 0.7s,width 0.7s,opacity 0.6s 0.7s,z-index 0s 1.3s;
    }
    .el__overflow{
       overflow:hidden;
       position:relative; 
       height:100%;
    }
    .el__inner{
        overflow:hidden;
        position:relative;
        height:100%;
        transition: transform 1s;
    }
    .cont.s--inactive .el__inner{
        transform: translate3d(0,100%,0);
    }
    .el__bg{
        position: relative;
        width:calc(100vw - 140px);
        height:100%;
        transition: transform 0.6s 0.7s;
    }
    .cont__inner:hover .el__bg::after{
        opacity: 1;
    }
    .el:hover .el__bg::after{
        opacity: 0;
    }
    .el__bg::before{
        position: absolute;
        content:"";
        top:-5%;
        left:0;
        width:100%;
        height:110%;
        background-size: cover;
        background-position: center center;
        transition:transform 1s;
        transform: translate3d(0,0,0) scale(1);
    }
    .cont.s--inactive .el__bg::before{
        transform: translate3d(0,-100%,0) scale(1.2);

    }
    .el:nth-child(2){
        transform-origin: 155% 50%; 
        transform:translate3d(105%,0,0);
    }
    .el:nth-child(3){
        transform-origin: 260% 50%;
        transform:translate3d(210%,0,0);
    }
    .el:nth-child(4){
        transform-origin: 365% 50%;
        transform:translate3d(315%,0,0);
    }
    .el:nth-child(5){
        transform-origin: 365% 50%; 
        transform:translate3d(420%,0,0);
    }
    /* 五首歌的封面 */
    .el:nth-child(1) .el__bg::before{
        transition-delay: 0s;
        background-image: url(bg1.jpg);
    }
    .el:nth-child(2) .el__bg::before{
        transition-delay: 0.1s;
        background-image: url(bg2.jpg);
    }
    .el:nth-child(3) .el__bg::before{
        transition-delay: 0.2s;
        background-image: url(bg3.jpg);
    }
    .el:nth-child(4) .el__bg::before{
        transition-delay: 0.3s;
        background-image: url(bg4.jpg);
    }
    .el:nth-child(5) .el__bg::before{
        transition-delay: 0.4s;
        background-image: url(bg5.jpg);
    }
    .el:nth-child(1) .el__inner{
        transition-delay: 0s;
    }
    .el:nth-child(2) .el__inner{
        transition-delay: 0.1s;
    }
    .el:nth-child(3) .el__inner{
        transition-delay: 0.2s;
    }
    .el:nth-child(4) .el__inner{
        transition-delay: 0.3s;
    }
    .el:nth-child(5) .el__inner{
        transition-delay: 0.4s;
    }
    .el__bg::after{
        position:absolute;
        content:"";
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color:rgba(0,0,0,0.3);
        opacity: 0;
    }
    .el__index{
        position:absolute;
        width: 100%;
        height: 100%;
        bottom:-80px;
        left:0;
        font-size:20vw;
        font-weight:bold;
        text-align: center;
        min-height: 250px;
        overflow:hidden;
        line-height:0.85;
        transition: transform 0.5s,opacity 0.3s 1.4s;
        transform: translate3d(0,1vw,0);
    }
    .el:hover .el__index{
        transform: translate3d(0,0,0);
    }
    .el__index-back,
    .el__index-front{
        position:absolute;
        left:0;
        bottom:0;
        width:100%;
    }
    .el__index-back{
        color:#2f3840;
        opacity: 0;
        transition:opacity 0.25s 0.25s;
    }
    .el:hover .el__index-back{
        opacity:1;
    }
    .el__index-overlay{
        overflow:hidden;
        position:relative;
        color:transparent;
        transform:translate3d(0,100%,0);   
        transition: transform 0.5s 0.1s;
    }
    .el__index-overlay::before{
        content:attr(data-index);
        position:absolute;
        left:0;
        bottom:0;
        height: 100%;
        width: 100%;
        color:#fff;
        transform:translate3d(0,-100%,0); 
        transition: transform 0.5s 0.1s;  
    }
    .el:hover .el__index-overlay{
        transform:translate3d(0,0,0);
    }
    .el:hover .el__index-overlay::before{
        transform:translate3d(0,0,0);
    }
    .el__preview-cont{
        z-index: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        left:0;
        top:0;
        width: 100%;
        height:100%;
        transition: all 0.3s 1.2s;
    }
    .el__heading{
        color:  #fff;
        text-transform: uppercase;
        font-size: 18px;
    }
    .el.s--active{
        z-index:1;
        width:100%;
        transform:translate3d(0,0,0);
        transition: transform 0.6s,width 0.7s 0.7s,z-index 0s;
    }
    .el.el.s--active .el__bg::before{
        transition-delay:0.6s ;
        transform: scale(1.1);
    }
    .cont.s--el-active .el__bg::after{
        transition: opacity 0.5s 1.4s;
        opacity: 1 !important;
    }
    /* 打开歌曲后标题消失 */
    .cont.s--el-active .el__preview-cont{
        opacity: 0; 
        transform:translateY(30px);
        transition:all 0.5s;
    }
    /* 打开歌曲后数字消失 */
    .cont.s--el-active .el__index{
        transition:transform 0.5s,opacity 0.3s;
        opacity: 0;    
    }
    /* 打开歌曲后指示消失 */
    .cont.s--el-active .el__instr{
        animation: none;
    }
    /* 打开歌曲后关闭按钮消失 */
    .cont.s--el-active .el__close{
        transition:transform 0.5s,opacity 0.3s;
        opacity: 0;
    }

    .el__content{
        z-index:-1;
        position:absolute;
        left:0;
        top:0;
        opacity: 0;
        width:100%;
        height:100%;
        padding:30px;
        pointer-events: none;
    }
    .el.s--active .el__content{
        z-index:2;
        opacity: 1;
        pointer-events: auto;
        transition:all 0.5s 1.4s;
    }
    .el__text{
        text-transform: uppercase;
        font-size:40px;
        color:#fff;
        text-align: center; 

    }
    .el__close-btn{
        position: absolute;
        width: 60px;
        height: 60px;
        top:10px;
        right:10px;
        cursor: pointer;
        pointer-events: none;
        opacity: 0;
        z-index: -1;
    }
    .el.s--active .el__close-btn{
        z-index: 5;
        opacity: 1;
        pointer-events: auto;
        transition:all 0s 1.4s;

    }
    .el__close-btn::before,
    .el__close-btn::after{
        position:absolute;
        content: "";
        left:0;
        top:50%;
        width:100%;
        height:8px;
        background-color:#fff;
        margin-top: -4px;
        opacity:0;
    }
    .el.s--active .el__close-btn::before,
    .el.s--active .el__close-btn::after{
        opacity: 1;  
    }
    .el__close-btn::before{
        transform: rotate(45deg) translateX(100%);
    }
    .el__close-btn::after{
        transform: rotate(-45deg) translateX(100%);   
    }
    .el.s--active .el__close-btn::before{
        transition: all 0.3s 1.8s;
        transform:rotate(45deg) translateX(0)
    }
    .el.s--active .el__close-btn::after{
        transition: all 0.3s 2s;
        transform:rotate(-45deg) translateX(0)
    }
    /* 点击一张图片其他图片的动画 */
    .cont.s--el-active .el:nth-child(1):not(.s--active){
        transform: scale(0.5) translate3d(0%,0,0);
        opacity: 0;
        transition: transform 0.95s,opacity 0.95s;
    }
    .cont.s--el-active .el:nth-child(2):not(.s--active){
        transform: scale(0.5) translate3d(50%,0,0);
        opacity: 0;
        transition: transform 0.95s,opacity 0.95s;
    }
    .cont.s--el-active .el:nth-child(3):not(.s--active){
        transform: scale(0.5) translate3d(100%,0,0);
        opacity: 0;
        transition: transform 0.95s,opacity 0.95s;
    }
    .cont.s--el-active .el:nth-child(4):not(.s--active){
        transform: scale(0.5) translate3d(150%,0,0);
        opacity: 0;
        transition: transform 0.95s,opacity 0.95s;
    }
    .cont.s--el-active .el:nth-child(5):not(.s--active){
        transform: scale(0.5) translate3d(300%,0,0);
        opacity: 0;
        transition: transform 0.95s,opacity 0.95s;
    }
    /* 上方闪烁指示 */
    @keyframes blink{
        0%, 100%{opacity: 0;}
        50%{opacity: 0.8;}
    }
    .el__instr{
        color:white;
        opacity: 0;
        position: relative;
        text-align: center;
        bottom:38px;
        animation: blink 3s ease-in-out 1.5s infinite ;
    }
    #buttons
{
    width: 150px;
	height: 30px;
	border: none;
	background: linear-gradient(-200deg,#d2cfd4,#161719);
	color: #FFFFFF;
	font-weight: blod;
    position:absolute;
	letter-spacing: 8px;
	border-radius: 10px;
	cursor: pointer;
	transition: 0.5s;
    right:0;
    top:38px;
    opacity: 0.6;
}
#buttons:hover{
	background: linear-gradient(-200deg,#161719,#d2cfd4);
	background-position-x: -280px;
}

    
</style>
<body>
    <div class="cont s--inactive">
        <!-- 上方指示 -->
        <div class="el__instr">*选择一首歌 </div>
        <div class="el__close">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button id="buttons">
            <a href="start.html" style="text-decoration: none;color: rgb(255, 255, 255);">BACK</a>
            </button>
        </div>
        <div class="cont__inner">
            <!-- 第一张 -->
            <div class="el">
                <div class="el__overflow">
                    <div class="el__inner">
                        <div class="el__bg"></div>
                        <div class="el__preview-cont">
                            <h2 class="el__heading">Song1</h2>
                        </div>
                        <div class="el__content">
                            <div class="el__text">
                                <a href="index.html" style="text-decoration: none;color: rgb(255, 255, 255);">game start</a>
                            </div>
                            <div class="el__close-btn"></div>
                        </div>
                    </div>
                </div>
                <!-- 数字序列号 -->
                <div class="el__index">
                    <div class="el__index-back">1</div>
                    <div class="el__index-front">
                        <div class="el__index-overlay" data-index="1">1</div>
                    </div>
                </div>
            </div>
            <!-- 第二张 -->
            <div class="el">
                <div class="el__overflow">
                    <div class="el__inner">
                        <div class="el__bg"></div>
                        <div class="el__preview-cont">
                            <h2 class="el__heading">Song2</h2>
                        </div>
                        <div class="el__content">
                            <div class="el__text">
                                <a href="https://www.baidu.com" style="text-decoration: none;color: rgb(255, 255, 255);">game start</a>
                            </div>
                            <div class="el__close-btn"></div>
                        </div>
                    </div>
                </div>
                <!-- 数字序列号 -->
                <div class="el__index">
                    <div class="el__index-back">2</div>
                    <div class="el__index-front">
                        <div class="el__index-overlay" data-index="2">2</div>
                    </div>
                </div>
            </div>
            <!-- 第三张 -->
            <div class="el">
                <div class="el__overflow">
                    <div class="el__inner">
                        <div class="el__bg"></div>
                        <div class="el__preview-cont">
                            <h2 class="el__heading">Song3</h2>
                        </div>
                        <div class="el__content">
                            <div class="el__text">
                                <a href="https://www.baidu.com" style="text-decoration: none;color: rgb(255, 255, 255);">game start</a>
                            </div>
                            <div class="el__close-btn"></div>
                        </div>
                    </div>
                </div>
                <!-- 数字序列号 -->
                <div class="el__index">
                    <div class="el__index-back">3</div>
                    <div class="el__index-front">
                        <div class="el__index-overlay" data-index="3">3</div>
                    </div>
                </div>
            </div>
            <!-- 第四张 -->
            <div class="el">
                <div class="el__overflow">
                    <div class="el__inner">
                        <div class="el__bg"></div>
                        <div class="el__preview-cont">
                            <h2 class="el__heading">Song4</h2>
                        </div>
                        <div class="el__content">
                            <div class="el__text">
                                <a href="https://www.baidu.com" style="text-decoration: none;color: rgb(255, 255, 255);">game start</a>
                            </div>
                            <div class="el__close-btn"></div>
                        </div>
                    </div>
                </div>
                <!-- 数字序列号 -->
                <div class="el__index">
                    <div class="el__index-back">4</div>
                    <div class="el__index-front">
                        <div class="el__index-overlay" data-index="4">4</div>
                    </div>
                </div>
            </div>
            <!-- 第五张 -->
            <div class="el">
                <div class="el__overflow">
                    <div class="el__inner">
                        <div class="el__bg"></div>
                        <div class="el__preview-cont">
                            <h2 class="el__heading">Song5</h2>
                        </div>
                        <div class="el__content">
                            <div class="el__text">
                                <a href="https://www.baidu.com" style="text-decoration: none;color: rgb(255, 255, 255);">game start</a>
                            </div>
                            <div class="el__close-btn"></div>
                        </div>
                    </div>
                </div>
                <!-- 数字序列号 -->
                <div class="el__index">
                    <div class="el__index-back">5</div>
                    <div class="el__index-front">
                        <div class="el__index-overlay" data-index="5">5</div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    
</body>
</html> 
<script>
    var cont = document.querySelector(".cont")
    var elstr = [].slice.call(document.querySelectorAll(".el"))
    var closeBtnArr = [].slice.call(document.querySelectorAll(".el__close-btn"))
// 打开整个界面的动画
    setTimeout(function(){
        cont.classList.remove("s--inactive")
    },200)
    elstr.forEach(function($el){
        $el.addEventListener("click",function(){
            if(this.classList.contains("s--active")) return;
            cont.classList.add("s--el-active")
            this.classList.add("s--active")
        })
    });
    // 关闭歌曲界面
    closeBtnArr.forEach(function($el){
        $el.addEventListener("click",function(e){
           e.stopPropagation()
           cont.classList.remove("s--el-active")
           document.querySelector(".el.s--active").classList.remove("s--active")
        })
    });
</script>